// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC

@use "ds/typography.scss" as *;

.style-box {
  --title-gap: var(--sp-xs);
  --title-padding: var(--sp-s);
  --title-color: var(--color-foreground-primary);
  --arrow-color: var(--color-foreground-secondary);
  --box-border-color: var(--color-background-primary);

  // TODO: this must be a custom property in the design system
  --lowEmphasis-background: #121214;

  padding-block: var(--sp-s);
  padding-inline: var(--sp-m);
  background-color: var(--lowEmphasis-background);

  border-block-end: 2px solid var(--box-border-color);
}

.disclosure-header {
  display: flex;
  align-items: center;
  gap: var(--title-gap);
  padding-block: var(--title-padding);
}

.disclosure-button {
  display: grid;
  place-items: center;
  color: var(--arrow-color);

  appearance: none;
  background: none;
  padding: 0;
  margin: 0;
  border: none;
}

.panel-title {
  @include use-typography("headline-small");
  flex: 1;
  color: var(--title-color);
}
